<template>
    <div>

        <router-link tag="div" to="/" class="header-abs">
            <span class="iconfont icon-fanhui"></span>
        </router-link>
        <div class="header-fixed" v-show="showAbs">
            <router-link tag="div" to="/" class="header-fixed" >
                <span class="iconfont icon-fanhui"></span>景点详情
            </router-link></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetailHeader",
        methods:{
            handleBackClick () {
                this.$router.push('/')
            },
            handleScroll() {
                let top = document.documentElement.scrollTop
                if (top<205){
                    this.showAbs = false
                }
                else if(top>205){
                    this.showAbs = true
                }
                // console.log(document.documentElement.scrollTop)
            }
        },
        data () {
            return {
                showAbs:false
            }
        },
        activated (){
            window.addEventListener('scroll',this.handleScroll)
        },
        deactivated () {
            window.removeEventListener('scroll',this.handleScroll)
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@/assets/styles/varibles.styl";
    .header-abs
        position:absolute
        left:.2rem
        top:.2rem
        width:.8rem
        height:.8rem
        line-height:.8rem
        text-align:center
        border-radius:.4rem
        background: rgba(0,0,0,.4)
        .icon-fanhui
            color:#fff
            font-size:.4rem
    .header-fixed
        z-index:98
        position:fixed
        top:0
        left:0
        right:0

        text-align:center
        overflow:hidden
        line-height:.86rem
        height:.86rem
        color:#fff
        background:$bgColor
        .header-no
            padding-right:2rem


</style>
